import React, { Component } from 'react';
import './AllGoodsList.scss'

class AllGoodsList extends Component {
    constructor(props){
        super(props);
        this.state={
            arr:[
                {name:'兰蔻第二代小黑瓶精华肌底液',origin:'1998',price:'1499',pic:'https://pic.cdfgsanya.com/assets/upload/product/9778b756f21356dfa2e17d1d39665a37_400x400.jpg'},
                {name:'海蓝之谜赋活保湿套装 保湿修护紧致舒缓护肤套装',origin:'7422',price:'5099',pic:'https://pic.cdfgsanya.com/assets/upload/product/5519cb885c8a5ebbbf7f17b410fd75e5_400x400.jpg'},
                {name:'雅诗兰黛特润修护肌活精华露两支装',origin:'1889',price:'1360',pic:'https://pic.cdfgsanya.com/assets/upload/product/d970c84c55c080ea4904ed6ca72a5273_400x400.jpg'},
                {name:'科颜氏焕白保湿护肤套装',origin:'1586',price:'1100',pic:'https://pic.cdfgsanya.com/assets/upload/product/68309a320835691e994d4a418e5ae28a_400x400.jpg'},
                {name:'兰蔻菁纯臻颜五件套  修护抗老',origin:'7337',price:'5299',pic:'https://pic.cdfgsanya.com/assets/upload/product/ddb8d98cc729f4a5dc8ec7539992bd58_400x400.jpg'},
                {name:'兰蔻第二代小黑瓶精华肌底液',origin:'1998',price:'1499',pic:'https://pic.cdfgsanya.com/assets/upload/product/9778b756f21356dfa2e17d1d39665a37_400x400.jpg'},
                {name:'海蓝之谜赋活保湿套装 保湿修护紧致舒缓护肤套装',origin:'7422',price:'5099',pic:'https://pic.cdfgsanya.com/assets/upload/product/5519cb885c8a5ebbbf7f17b410fd75e5_400x400.jpg'},
                {name:'雅诗兰黛特润修护肌活精华露两支装',origin:'1889',price:'1360',pic:'https://pic.cdfgsanya.com/assets/upload/product/d970c84c55c080ea4904ed6ca72a5273_400x400.jpg'},
                {name:'科颜氏焕白保湿护肤套装',origin:'1586',price:'1100',pic:'https://pic.cdfgsanya.com/assets/upload/product/68309a320835691e994d4a418e5ae28a_400x400.jpg'},
                {name:'兰蔻菁纯臻颜五件套  修护抗老',origin:'7337',price:'5299',pic:'https://pic.cdfgsanya.com/assets/upload/product/ddb8d98cc729f4a5dc8ec7539992bd58_400x400.jpg'},
                {name:'兰蔻第二代小黑瓶精华肌底液',origin:'1998',price:'1499',pic:'https://pic.cdfgsanya.com/assets/upload/product/9778b756f21356dfa2e17d1d39665a37_400x400.jpg'},
            ]
        }
    }
    render() {
        return (
            <div id='AllGoodsList'>
                {
                    this.state.arr.map((item,index)=>{
                        return(
                            <div className='card' key={index}>
                               <img src={item.pic} alt="" />
                               <span className='name'>{item.name}</span><br />
                               <span className='origin'>原价￥{item.origin}</span><br />
                               <i>活动价￥</i><span className='price'>{item.price}</span>
                           </div>
                       )
                   })
                }
            </div>
        );
    }
}

export default AllGoodsList;